<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现节流</title>
</head>
<body style="height:  140vh;">
    
</body>
<script>
    /**
     * 函数节流（Throttling）是一种常用的优化技术，它可以控制函数的执行频率，
     * 使得函数在一定时间内最多执行一次。与函数防抖类似，
     * 但不同之处在于，函数节流在指定的时间间隔内始终会执行一次函数。
    */
    // 节流和防抖的共同电都是对高频的触发事件进行优化
    // 防抖只是对于高频的事件只是在最后一次触发的时候来进行执行需要的操作
    // 节流是在规定的事件内去执行需要的操作
    window.onscroll = throttle(function () {
        alert('这是广告')
    }, 2000)
    function throttle(func, interval) {
        let lastTime = 0;

        return function(...args) {
            const now = Date.now();

            if (now - lastTime >= interval) {
                func.apply(this, args);
                lastTime = now;
            }
        };
    }
</script>
</html>